.table-header {
  container-name: table-header;
  container-type: inline-size;

  & [data-field] {
    width: clamp(var(--sizing-30), 30cqw, var(--sizing-60));
  }

  & [data-table-actions] {
    width: auto;
  }

  & [data-table-header-pagination] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
    gap: var(--outer-spacing-1);
    container-type: inline-size;
    container-name: table-header-pagination;
    min-inline-size: calc(var(--sizing-7) * 2 + var(--outer-spacing-1));
  }

  & [data-table-header-pagination] > [data-field] {
    width: max-content;
  }

  & [data-table-header-pagination] > [data-field] input {
    text-align: center;
    width: 3ch;
  }
}

.table-header [data-layout] {
  display: flex;
  gap: var(--outer-spacing-1);
  padding: var(--outer-spacing-1);
  border-bottom: var(--border-width-1) solid var(--color-bd);
}

@container table-header-pagination (inline-size < 250px) {
  &
    [data-table-header-pagination]
    > :is([class*="wds-footnote-text"], [data-field]) {
    display: none;
  }
}

@container table-header (inline-size <= 320px) {
  [data-layout] {
    /* This needs to be wrap once we have actions implemented */
    flex-wrap: nowrap;
  }

  [data-layout] [data-field] {
    width: 100%;
  }
}

@container table-header (inline-size <= 150px) {
  [data-layout] [data-table-actions] {
    width: 50cqw;
  }
}
